<template>
<Title>
  {{baseTitle}}-登录
</Title>
<div class="login">
  <div class="main">
    <el-card class="box-card">
      <h1>登录</h1>
      <el-form :model="form">
        <el-form-item label="账号:">
          <el-input v-model="login.userId" />
        </el-form-item>
        <el-form-item label="密码:">
          <el-input v-model="login.password" />
        </el-form-item>
      </el-form>
      <el-button @click="loginFun" type="primary" plain>登录</el-button>
    </el-card>
  </div>
</div>
</template>
<script setup>
import { loginApi } from '@/api/login'
import { ElMessage } from 'element-plus'
import { baseTitle } from '@/config/base'
const $router = useRouter()
// 登录的变量
const login = reactive({
  userId: '521',
  password: '123'
})
// 登录的方法
const loginFun = () => {
  loginApi({
    ...login
  }).then(res => {
    const { data } = res
    if (data.code === 200) {
      // 登录状态成功.
      ElMessage({
        message: '登录成功!',
        type: 'success',
      })
      // 记录用户数据到本地存储
      localStorage.setItem('userData', JSON.stringify(data.data))
      // 跳转到主页
      $router.push('/home')
    }
  }).catch(err => {
    console.log(err);
    ElMessage({
      message: '未知错误请联系网站管理员!',
      type: 'error',
    })
  })
//   console.log(data);
}
</script>
<style lang="scss" scoped>
.login {
  background-image: var(--baclgroung-image-url);
  background-repeat: no-repeat;
  background-size: cover;
  .main {
    width: 100vw;
    height: 100vh;
    background-color: var(--guide-bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    .box-card {
      background-color: rgba(255,255,255,0.4);
      padding: 12px 40px 12px 40px;
    }
    :deep(.el-card__body) {
    //   width: 480px;
      display: inline-flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: black;
      background-color: rgba($color: #000000, $alpha: 0);
      .el-form-item__label {
        color: black;
      }
      h1 {
        margin-bottom: 20px;
        font-size: 22px;
      }
    }
  }
}
</style>
